<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
         /* div::before 权重是2 */
        div::before {
            /* 这个content是必须要写的 */
            content: '我';
        }

        div::after {
            content: '小猪佩奇';
        }

        img {
           height: 300px;
           filter: blur(2px);
           width: calc(50% - 80px);
        }
        
    </style>
</head>
<body>
    <div>hello</div>
    <img src="../images/1.webp" alt="">
</body>

<!-- 
    注意：

    before 和 after 创建一个元素，但是属于行内元素
    新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
    语法： element::before {}
    before 和 after 必须有 content 属性
    before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素
    伪元素选择器和标签选择器一样，权重为 1

    filter:   函数();  例如： filter: blur(5px);   blur模糊处理  数值越大越模糊


    计算盒子宽度 – calc 函数
calc() 此CSS函数让你在声明CSS属性值时执行一些计算
width: calc(100% - 80px);
括号里面可以使用 + - * / 来进行计算


 -->
 
</html>